<template>
  <div>
    <Table
      :row-class-name="rowClassName"
      :columns="colData"
      :data="resTableData"
      :height="height"
      :max-height="height"
      :highheight-row="highheightRow"
    ></Table>
    <ul style="text-align:left; padding:10px 0px; list-style:none;">
      <li>
        <Modal
          v-model="item.videoModal"
          :title="
            item.station +
              ' - ' +
              item.action +
              ' - ' +
              item.level +
              ' - ' +
              item.cause +
              ' - ' +
              item.datetime
          "
          width="1080"
          class-name="vertical-center-modal"
          footer-hide
        >
          <div style="height: 100%;padding: 10px 10px;">
            <img
              :src="item.http_url_image"
              style="width:100%;padding:10px 10px;"
            />
          </div>
        </Modal>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "myTable",
  props: {
    tableData: {
      type: Array
    }
  },
  computed: {
    resTableData: function() {
      return this.tableData.map(ele => {
        ele.cellClassName = {
          status:
            ele.status === "合规"
              ? "demo-table-info-cell-legal"
              : "demo-table-info-cell-illegal"
        };
        return ele;
      });
    }
    /*item: function() {  
      console.log(this.tableData[0])
      console.log(this.tableData[0].station) 
      console.log(this.tableData[0].videoModal)
      if (this.tableData[0] != "undefined"){
          return this.tableData[0];
      }
      return null
    }*/
  },
  mounted() {
    // console.log(this.tableData[0]);
    if (this.tableData[0] != undefined) {
      this.item = this.tableData[0];
    } else {
      this.item["videoModal"] = false;
      this.item["station"] = "";
      this.item["action"] = "";
      this.item["level"] = "";
      this.item["datetime"] = "";
      this.item["http_url_image"] = "";
    }
  },
  data() {
    return {
      item: {},
      height: 540,
      highheightRow: true,
      newTableData: [],
      colData: [
        { title: "事件名称", key: "action", width: "120", align: "center" },
        { title: "事件状态", key: "status", width: "100", align: "center" },
        { title: "发生时间", key: "datetime", width: "auto", align: "center" },
        {
          title: "事件详情",
          key: "detail",
          width: "100",
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "success",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    // console.log("点击事件详情：", params.row, params.index);
                    this.item = params.row;
                    this.item.videoModal = true;
                  }
                }
              },
              "查看详情"
            );
          }
        }
      ]
    };
  },
  methods: {
    rowClassName() {
      // console.log("row：" + row, "，index：" + index);

      return "demo-table-info-row";
    }
  }
};
</script>

<style lang="less">
@table-background-color: #0a4271 !important;

.ivu-table {
  color: #fff !important;
  overflow-x: hidden !important;
  background-color: #01237c !important;
  overflow-y: hidden !important;
}
.ivu-table .demo-table-info-row td {
  font-size: 16px;
}
.ivu-table th {
  background-color: @table-background-color;
  font-size: 16px;
}
.ivu-table .demo-table-error-row td {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table td.demo-table-info-column {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-name {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-age {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table .demo-table-info-cell-address {
  background-color: #187;
  color: #fff;
}
.ivu-table-wrapper {
  border: 1px solid @table-background-color;
}
.ivu-table:after {
  background-color: @table-background-color;
}
.ivu-table td,
.ivu-table th {
  border-bottom: 1px solid @table-background-color;
}
.ivu-table .demo-table-info-row-legal {
  color: #18b566;
}
.ivu-table .demo-table-info-row-illegal {
  color: #f29100;
}
.ivu-table .demo-table-info-cell-legal {
  color: #18b566;
  font-weight: bold !important;
}
.ivu-table .demo-table-info-cell-illegal {
  color: #f29100;
  font-weight: bold !important;
}
.ivu-page-next,
.ivu-page-prev {
  background-color: #01237c !important;
}
.ivu-page-item {
  background-color: #1081b2 !important;
  color: red !important;
}
.ivu-page-item a {
  color: white !important;
}
.ivu-page-item-active a {
  color: blue !important;
}
.ivu-page-options-elevator input {
  background-color: #1081b2 !important;
  color: #fff !important;
}
.ivu-table td {
  background-color: #01237c !important;
}
.ivu-table-overflowX {
  overflow-x: hidden !important;
}
.ivu-table-tip table td {
  font-size: 16px;
}
.ivu-table-tip {
  overflow: hidden !important;
}
</style>
